<script>
// https://lbsyun.baidu.com/index.php
export default {
    methods:{
        createPoint(map,{lan,lat,item}){
            let point=new BMapGL.Point(lan,lat)
            // console.log("point",point);
            let marker=new BMapGL.Marker3D(point,0,{
                size:18,
                shape:1,
                fillColor:'#34bfa3',
                fillOpacity:.8
            })
            map.addOverlay(marker)
            let info=new BMapGL.InfoWindow(`<div class='map-device-info'>
                <p>设备名称：<span>${item.deviceName}</span></p>
                <p>设备编号：${item.serialNumber}</p>
                <p>所在地址：${item.networkAddress}</p>
                </div>`,{
                    width:200,
                    height:100,
                    title:`<h2 class="map-device-info">设备详细信息</h2>`
                })
            marker.addEventListener('click',()=>map.openInfoWindow(info,point))    
        }
    },
    async created(){
        try{
            let {code,rows}=await this.$API.queryDeviceAll()
            // console.log("rows",rows);
            if(+code === 200 && this.map){
                rows.forEach(item=>{
                    // console.log("1",this.createPoint);
                    this.createPoint(this.map,{
                        lan:item.longitude,
                        lat:item.latitude,
                        item
                    })
                })
            }
        }catch(_){}
    },
    mounted(){
        const mapBox = this.$refs.mapBox
        this.map = new BMapGL.Map(mapBox)//创建地图实例
        let point = new BMapGL.Point(103.38861,35.86166)//创建点坐标
        this.map.centerAndZoom(point,5)//初始化地图，设置中心点坐标和地图级别
        this.map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放

    }
}
</script>

<template>
    <div class="map-box" ref="mapBox"></div>
</template>

<style lang="less" scoped></style>